/* eslint-disable react/prop-types */
import React, { memo } from 'react';
import classnames  from "classnames";
import { PlayCircleOutlined, CaretRightOutlined } from '@ant-design/icons';
import { getCount } from '@/utils';


// 由父组件传递参数进行渲染
function PicList(props) {
  const {
    // isHover, // hover效果
    isDrop, // 下拉效果
    imageUrl, // 图片地址
   playCount, // 播放次数
    // artistLink, // 歌手信息
    introductionText,  // 文字介绍
  } = props;

  const iconPlay = classnames("icon_play", {
    // [size]: true
  })

  return (
    <div className="cover-top">
      {isDrop ? (<div className="hover-text">根据您的音乐口味生成每日更新</div>) : null}
      <div className="imgBox">
        <img className="img" style={{ width: "100%" }} src={imageUrl ? imageUrl : "../assets/images/cover.jpg"} alt="" />
        <span className={iconPlay}>
          <CaretRightOutlined />
        </span>
      </div>
      <div className="info">
        <span className="playCount">
          {/* <i className="icon_play1"></i> */}
          <PlayCircleOutlined style={{marginRight: "5px"}} />
          {getCount(playCount)}
        </span>
      </div>
      <p className="text">{ introductionText }</p>
    </div>
  )
}

export default memo(PicList);
